<template>

  <div class="ai-chat-container" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
    <TopNav />
    <CategoryNav />
    <!-- 左侧导航栏 -->
    <div class="chat-sidebar" :class="{ 'mobile-show': showMobileSidebar }">
      <div class="sidebar-content">
        <!-- AI助手信息 -->
        <div class="ai-info">
          <div class="ai-avatar">
            <div class="avatar-glow" :class="{ 'thinking': isLoading }"></div>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
            </svg>
          </div>
          <div class="ai-details">
            <h1 class="ai-title">社区智能助手</h1>
            <p class="ai-status">
              <span class="status-dot" :class="{ 'thinking': isLoading }"></span>
              {{ isLoading ? "正在思考中..." : "在线服务" }}
            </p>
          </div>
        </div>

        <!-- 功能按钮 -->
        <div class="sidebar-actions">
          <button @click="clearHistory" class="sidebar-btn" title="清空对话">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c0 1 1 2 2 2v2" />
            </svg>
            <span class="btn-text">清空对话</span>
          </button>
        </div>

        <!-- 快捷功能 -->
        <div class="sidebar-shortcuts">
          <h3 class="shortcuts-title">快捷功能</h3>
          <div class="shortcuts-list">
            <button
              v-for="question in quickQuestions.slice(0, 4)"
              :key="question.id"
              @click="sendQuickQuestion(question.text)"
              class="shortcut-item"
            >
              <span class="shortcut-icon">{{ question.icon }}</span>
              <span class="shortcut-text">{{ question.text }}</span>
            </button>
          </div>
        </div>

      </div>
    </div>

    <!-- 主聊天区域 -->
    <main class="chat-main">

      <!-- 消息区域 -->
      <div class="messages-container" ref="messagesContainer">
        <div class="messages-wrapper">
          <!-- 欢迎界面 -->
          <div v-if="messages.length === 1" class="welcome-section">
            <div class="welcome-card">
              <div class="welcome-icon">
                <div class="icon-circle">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
                  </svg>
                </div>
              </div>
              <h2 class="welcome-title">你好，我是社区智能助手 👋</h2>
              <p class="welcome-subtitle">我可以帮助您解答社区相关问题，提供便民服务信息</p>

              <!-- 快捷问题 -->
              <div class="quick-questions">
                <h3 class="quick-title">常见问题</h3>
                <div class="question-grid">
                  <button
                    v-for="question in quickQuestions"
                    :key="question.id"
                    @click="sendQuickQuestion(question.text)"
                    class="question-card"
                  >
                    <div class="question-icon">{{ question.icon }}</div>
                    <span class="question-text">{{ question.text }}</span>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <br>

          <!-- 消息列表 -->
          <div v-for="(message, index) in messages" :key="index" class="message-group">
            <div class="message-container" :class="{ 'user-message': message.isMine }">
              <div class="message-avatar">
                <div class="avatar-circle" :class="message.isMine ? 'user-avatar' : 'bot-avatar'">
                  <span v-if="message.isMine">{{ userInitial }}</span>
                  <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                       stroke-width="2">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
                  </svg>
                </div>
              </div>
              <div class="message-content">
                <div class="message-bubble" :class="{ 'user-bubble': message.isMine }">
                  <div class="message-text" v-html="formatMessage(message.text || '')"></div>
                  <div class="message-time">{{ formatTime(message.timestamp) }}</div>
                </div>
                <!-- 消息操作 -->
                <div v-if="!message.isMine" class="message-actions">
                  <button @click="copyMessage(message.text)" class="action-btn-small" title="复制">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                    </svg>
                  </button>
                  <button @click="likeMessage(index)" class="action-btn-small" :class="{ 'liked': message.liked }"
                          title="点赞">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path
                        d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
                    </svg>
                  </button>
                  <button @click="regenerateMessage(index)" class="action-btn-small" title="重新生成">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <polyline points="23,4 23,10 17,10" />
                      <path d="M20.49,9A9,9,0,0,0,5.64,5.64L1,10" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 加载动画 -->
          <div v-if="isLoading" class="message-group loading-message">
            <div class="message-container">
              <div class="message-avatar">
                <div class="avatar-circle bot-avatar">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
                  </svg>
                </div>
              </div>
              <div class="message-content">
                <div class="message-bubble">
                  <div class="typing-indicator">
                    <div class="typing-dots">
                      <span></span>
                      <span></span>
                      <span></span>
                    </div>
                    <span class="typing-text">AI正在思考...</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-area">
        <div class="input-container">
          <!-- 输入建议 -->
          <div v-if="suggestions.length > 0" class="suggestions-bar">
            <div class="suggestions-scroll">
              <button
                v-for="suggestion in suggestions"
                :key="suggestion"
                @click="applySuggestion(suggestion)"
                class="suggestion-chip"
              >
                {{ suggestion }}
              </button>
            </div>
          </div>

          <!-- 输入框 -->
          <div class="input-wrapper">
            <div class="input-box">
              <textarea
                v-model="newMessage"
                @keydown="handleKeydown"
                @input="handleInput"
                placeholder="输入消息，按 Enter 发送..."
                class="message-input"
                :disabled="isLoading"
                rows="1"
                ref="messageInput"
              ></textarea>
              <div class="input-actions">
                <button
                  @click="sendMessage"
                  :disabled="isLoading || !newMessage.trim()"
                  class="send-button"
                  title="发送消息"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="22" y1="2" x2="11" y2="13"></line>
                    <polygon points="22,2 15,22 11,13 2,9 22,2"></polygon>
                  </svg>
                </button>
              </div>
            </div>
          </div>

        </div>
      </div>

    </main>
  </div>
</template>

<script>
import { chat } from "@/api/chat";
import { mapGetters } from "vuex";
import TopNav from "@/components/TopNav.vue";
import CategoryNav from "@/components/CategoryNav.vue";

export default {
  name: "AI",
  components: { CategoryNav, TopNav },
  data() {
    return {
      newMessage: "",
      messages: [
        {
          text: "你好！我是社区智能助手，有什么可以帮助你的吗？",
          isMine: false,
          timestamp: new Date(),
          liked: false
        }
      ],
      isLoading: false,
      showMobileSidebar: false,
      sidebarCollapsed: false,
      suggestions: [],
      quickQuestions: [
        { id: 1, icon: "🏠", text: "社区公告有哪些？" },
        { id: 2, icon: "📦", text: "快递代收服务" },
        { id: 3, icon: "🎯", text: "社区活动报名" },
        { id: 4, icon: "🛒", text: "校园商店推荐" },
        { id: 5, icon: "📚", text: "学习资源分享" },
        { id: 6, icon: "🤝", text: "寻找室友" }
      ],
      userInitial: "U",
      todayChats: 0
    };
  },
  computed: {
    ...mapGetters(["isAuthenticated"]),
    containerClass() {
      return {
        "ai-chat-container": true
      };
    }
  },
  methods: {
    formatMessage(text) {
      if (!text) return "";

      const escapeHtml = (unsafe) => {
        // 确保 unsafe 是字符串类型
        if (typeof unsafe !== 'string') {
          unsafe = String(unsafe || '');
        }
        return unsafe
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#039;");
      };

      let formattedText = escapeHtml(text);

      // 处理换行符
      formattedText = formattedText.replace(/\n/g, "<br>");

      // 处理粗体文本
      formattedText = formattedText.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");

      // 处理斜体文本
      formattedText = formattedText.replace(/\*(.*?)\*/g, "<em>$1</em>");

      // 处理代码块
      formattedText = formattedText.replace(/```([\s\S]*?)```/g, "<pre><code>$1</code></pre>");

      // 处理行内代码
      formattedText = formattedText.replace(/`([^`]+)`/g, "<code>$1</code>");

      // 处理链接
      formattedText = formattedText.replace(/(https?:\/\/[^\s]+)/g, "<a href=\"$1\" target=\"_blank\" rel=\"noopener\">$1</a>");

      return formattedText;
    },

    formatTime(timestamp) {
      if (!timestamp) return "";
      const now = new Date();
      const time = new Date(timestamp);
      const diff = now - time;

      if (diff < 60000) return "刚刚";
      if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;
      if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;

      return time.toLocaleTimeString("zh-CN", {
        hour: "2-digit",
        minute: "2-digit"
      });
    },

    async sendMessage() {
      // 判断当时用户是否已登录
      if (!this.isAuthenticated) {
        this.$toast?.error("请先登录");
        return;
      }

      const messageText = this.newMessage.trim();
      if (messageText === "" || this.isLoading) {
        return;
      }

      // 添加用户消息
      this.messages.push({
        text: messageText,
        isMine: true,
        timestamp: new Date()
      });

      this.newMessage = "";
      this.isLoading = true;
      this.suggestions = [];
      this.adjustTextareaHeight();
      this.scrollToBottom();
      this.todayChats++;

      try {
        const response = await chat(messageText);
        
        // 根据实际的响应结构获取数据
        let responseText = '';
        if (response && response.data) {
          responseText = response.data;
        } else if (typeof response === 'string') {
          responseText = response;
        } else {
          responseText = "抱歉，我暂时遇到了一些问题，请稍后再试。";
        }

        this.messages.push({
          text: responseText,
          isMine: false,
          timestamp: new Date(),
          liked: false
        });
        this.saveToLocalStorage();
      } catch (error) {
        console.error("AI chat error:", error);
        this.messages.push({
          text: "抱歉，我暂时遇到了一些问题，请稍后再试。",
          isMine: false,
          timestamp: new Date(),
          liked: false
        });
      } finally {
        this.isLoading = false;
        this.scrollToBottom();
      }
    },

    sendQuickQuestion(question) {
      this.newMessage = question;
      this.sendMessage();
    },

    clearHistory() {
      this.messages = [
        {
          text: "你好！我是社区智能助手，有什么可以帮助你的吗？",
          isMine: false,
          timestamp: new Date(),
          liked: false
        }
      ];
      this.saveToLocalStorage();
      this.scrollToBottom();
    },

    toggleMobileSidebar() {
      this.showMobileSidebar = !this.showMobileSidebar;
    },

    copyMessage(text) {
      navigator.clipboard.writeText(text).then(() => {
        this.$toast?.success("消息已复制");
      }).catch(() => {
        this.$toast?.error("复制失败");
      });
    },

    likeMessage(index) {
      this.messages[index].liked = !this.messages[index].liked;
      this.saveToLocalStorage();
    },

    async regenerateMessage(index) {
      if (index > 0 && !this.messages[index - 1].isMine) return;

      const userMessage = this.messages[index - 1].text;
      this.isLoading = true;

      try {
        const response = await chat(userMessage);
        console.log("AI regenerate response:", response);
        
        // 根据实际的响应结构获取数据
        let responseText = '';
        if (response && response.data) {
          responseText = response.data;
        } else if (typeof response === 'string') {
          responseText = response;
        } else {
          responseText = "抱歉，我暂时遇到了一些问题，请稍后再试。";
        }

        this.messages[index].text = responseText;
        this.messages[index].timestamp = new Date();
        this.saveToLocalStorage();
        this.$toast?.success("消息已重新生成");
      } catch (error) {
        console.error("Regenerate error:", error);
        this.$toast?.error("重新生成失败");
      } finally {
        this.isLoading = false;
      }
    },

    applySuggestion(suggestion) {
      this.newMessage = suggestion;
      this.suggestions = [];
      this.$refs.messageInput.focus();
    },

    handleInput() {
      this.adjustTextareaHeight();

      // 智能建议逻辑
      const text = this.newMessage.toLowerCase();
      this.suggestions = [];

      if (text.includes("社区")) {
        this.suggestions = ["社区公告", "社区活动", "社区服务"];
      } else if (text.includes("快递")) {
        this.suggestions = ["快递代收", "快递查询", "快递投诉"];
      } else if (text.includes("活动")) {
        this.suggestions = ["活动报名", "活动时间", "活动地点"];
      } else if (text.includes("学习")) {
        this.suggestions = ["学习资源", "学习小组", "学习计划"];
      }
    },

    handleKeydown(event) {
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        this.sendMessage();
      }
      this.$nextTick(() => {
        this.adjustTextareaHeight();
      });
    },

    adjustTextareaHeight() {
      const textarea = this.$refs.messageInput;
      if (textarea) {
        textarea.style.height = "auto";
        textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
      }
    },

    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.messagesContainer;
        if (container) {
          container.scrollTo({
            top: container.scrollHeight,
            behavior: "smooth"
          });
        }
      });
    },

    saveToLocalStorage() {
      try {
        localStorage.setItem("ai-chat-messages", JSON.stringify(this.messages));
        localStorage.setItem("ai-chat-today-count", this.todayChats.toString());
      } catch (error) {
        console.error("保存聊天记录失败:", error);
      }
    },

    loadFromLocalStorage() {
      try {
        const saved = localStorage.getItem("ai-chat-messages");
        if (saved) {
          this.messages = JSON.parse(saved);
        }

        const todayCount = localStorage.getItem("ai-chat-today-count");
        if (todayCount) {
          this.todayChats = parseInt(todayCount);
        }
      } catch (error) {
        console.error("加载聊天记录失败:", error);
      }
    },

    // 点击外部关闭表情选择器
    handleClickOutside(event) {
      if (this.showEmojiPicker && !event.target.closest(".emoji-picker") && !event.target.closest(".input-action-btn")) {
        this.showEmojiPicker = false;
      }
      if (this.showMobileSidebar && !event.target.closest(".chat-sidebar") && !event.target.closest(".mobile-menu-btn")) {
        this.showMobileSidebar = false;
      }
    },

    // 检测屏幕尺寸
    handleResize() {
      if (window.innerWidth > 768) {
        this.showMobileSidebar = false;
      }
    }
  },

  watch: {
    newMessage() {
      this.$nextTick(() => {
        this.adjustTextareaHeight();
      });
    }
  },

  mounted() {
    this.loadFromLocalStorage();
    this.scrollToBottom();
    document.addEventListener("click", this.handleClickOutside);
    window.addEventListener("resize", this.handleResize);

    // 获取用户名首字母
    const userName = localStorage.getItem("userName") || "User";
    this.userInitial = userName.charAt(0).toUpperCase();
  },

  beforeDestroy() {
    document.removeEventListener("click", this.handleClickOutside);
    window.removeEventListener("resize", this.handleResize);
  }
};
</script>

<style scoped>
/* 基础样式 */
.ai-chat-container {
  height: calc(100vh - 128px);
  display: flex;
  flex-direction: row;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 30%, #f0fdf4 70%, #ecfdf5 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 左侧导航栏 */
.chat-sidebar {
  width: 280px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(59, 130, 246, 0.1);
  flex-shrink: 0;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  z-index: 999;
}

@media (max-width: 768px) {
  .chat-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    height: 100vh;
    z-index: 999;
  }

  .chat-sidebar.mobile-show {
    left: 0;
  }
}

.sidebar-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

/* AI助手信息 */
.ai-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
  position: relative;
}

.ai-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.avatar-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
  border-radius: 14px;
  opacity: 0;
  animation: rotate 3s linear infinite;
  z-index: -1;
}

.avatar-glow.thinking {
  opacity: 0.6;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ai-details {
  flex: 1;
  min-width: 0;
}

.ai-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.ai-status {
  font-size: 12px;
  color: #3b82f6;
  margin: 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.thinking {
  background: #f59e0b;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 功能按钮 */
.sidebar-actions {
  margin-bottom: 32px;
}

.sidebar-btn {
  width: 100%;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  color: #3b82f6;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  margin-bottom: 8px;
  font-size: 14px;
}

.sidebar-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.btn-text {
  flex: 1;
  text-align: left;
}

/* 快捷功能 */
.sidebar-shortcuts {
  flex: 1;
  margin-bottom: 24px;
}

.shortcuts-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 16px 0;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcut-item {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.shortcut-item:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateX(2px);
}

.shortcut-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.shortcut-text {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

/* 主聊天区域 */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 消息容器 */
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  scroll-behavior: smooth;
}

.messages-wrapper {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* 欢迎界面 */
.welcome-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.welcome-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 500px;
  width: 100%;
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-icon {
  margin-bottom: 24px;
}

.icon-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: white;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.welcome-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.welcome-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0 0 32px 0;
  line-height: 1.5;
}

/* 快捷问题 */
.quick-questions {
  text-align: left;
}

.quick-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 16px 0;
  text-align: center;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.question-card {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.question-card:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.question-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.question-text {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

/* 消息样式 */
.message-group {
  margin-bottom: 24px;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-container {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.message-container.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  flex-shrink: 0;
}

.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.user-avatar {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.bot-avatar {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-bubble {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 16px;
  padding: 12px 16px;
  max-width: 85%;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-bubble {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-color: transparent;
  margin-left: auto;
}

.message-text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.message-text:last-child {
  margin-bottom: 0;
}

.message-text strong {
  font-weight: 600;
}

.message-text em {
  font-style: italic;
}

.message-text code {
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  word-break: break-all;
  overflow-wrap: break-word;
}

.message-text pre {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.message-text pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-text a {
  color: #3b82f6;
  text-decoration: underline;
  word-break: break-all;
  overflow-wrap: break-word;
}

.user-bubble .message-text a {
  color: #bfdbfe;
}

.message-time {
  font-size: 11px;
  color: #9ca3af;
  text-align: right;
}

.user-bubble .message-time {
  color: rgba(255, 255, 255, 0.7);
}

/* 消息操作 */
.message-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message-container:hover .message-actions {
  opacity: 1;
}

.action-btn-small {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 6px;
  padding: 4px;
  color: #3b82f6;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn-small:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

.action-btn-small.liked {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* 加载动画 */
.loading-message .message-bubble {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.1);
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.typing-dots {
  display: flex;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: #3b82f6;
  border-radius: 50%;
  animation: typingDot 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

.typing-text {
  font-size: 12px;
  color: #6b7280;
}

/* 输入区域 */
.input-area {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(59, 130, 246, 0.1);
  padding: 16px 24px;
  flex-shrink: 0;
}

.input-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* 输入建议 */
.suggestions-bar {
  margin-bottom: 12px;
}

.suggestions-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.suggestions-scroll::-webkit-scrollbar {
  height: 4px;
}

.suggestions-scroll::-webkit-scrollbar-track {
  background: rgba(59, 130, 246, 0.1);
  border-radius: 2px;
}

.suggestions-scroll::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.3);
  border-radius: 2px;
}

.suggestion-chip {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  color: #3b82f6;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.suggestion-chip:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

/* 输入框 */
.input-wrapper {
  position: relative;
}

.input-box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.input-box:focus-within {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.message-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  min-height: 20px;
  max-height: 120px;
  color: #1f2937;
}

.message-input::placeholder {
  color: #9ca3af;
}

.input-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.send-button {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  min-width: 80px;
  height: 32px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  user-select: none;
  white-space: nowrap;
  pointer-events: all;
  opacity: 1;
}
</style>